<template>
  <h2>模板使用</h2>
  <div ref="container" class="container">{{ content }}</div>
  <input type="text" class="username"></input>
  <button @click="getElementHandle">获取元素</button>

</template>
<script>
export default {
  // 目前比多的都是使用vue的语法,虽然vue的声明性渲染模型抽象了大部分对DOM的直接操作,但是在某些情况下,
  // 我们仍然需要直接访问底层DOM元素,要实现这个,可以使用特殊的ref attribute
  data() {
    return {
      content: "内容"
    };
  },
  // 计算属性
  computed: {},
  methods: {
    getElementHandle() {
      // console.log(this.$refs.container)
      // 这里可以通过 $refs 拿到div
      // <div class="container">内容</div></div>
      // this.$refs.container.innerHTML = "哈哈哈哈哈"
      // <div class="container">哈哈哈哈哈</div>

      // 这里获取username的input输入信息
      console.log(this.$refs.username)
    }
  },
  // 监听
  watch: {

}
};
</script>
